<!--
 * @Description: 站点列表
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:26:28
 * @LastEditTime: 2021-11-13 17:32:03
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <template v-if="show === 0">
      <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
        <div slot="top">
          <el-form :model="filterSearch" label-width="80px" label-position="right">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :lg="6">
                <!-- 站点名称 -->
                <el-form-item label="站点名称">
                  <el-input v-model.trim="filterSearch.keyword" placeholder="名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <!-- 租户名称 -->
                <el-form-item label="租户名称">
                  <el-input v-model.trim="filterSearch.tenantName" placeholder="名称"></el-input>
                </el-form-item>
              </el-col>
              <!-- 搜索 重置 -->
              <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
              </el-row>
            </el-row>
          </el-form>
        </div>
        <div slot="bottom">
          <!-- 新增 -->
          <el-button size="medium" type="primary" plain @click="handleCreate" v-power="2">新建</el-button>
        </div>
      </table-bar>
      <tao-table
        class="table-box"
        :data="dataList"
        :page="page"
        @changePage="changePage"
        :showPage="true"
        ref="table"
      >
        <!-- 详情 -->
        <el-table-column label="详情" align="center" width="80" type="expand">
          <template slot-scope="scope">
            <info :row="scope.row" />
          </template>
        </el-table-column>
        <!-- ID -->
        <el-table-column
          v-if="columns[0].show"
          align="center"
          width="80"
          label="ID"
          sortable
          prop="id"
        />
        <!-- 名称 -->
        <el-table-column
          v-if="columns[1].show"
          width="250"
          label="名称"
          show-overflow-tooltip
          prop="sitename"
        />
        <!-- ip类型 -->
        <el-table-column
          v-if="columns[2].show"
          align="center"
          width="100"
          label="IP类型"
          sortable
          prop="neIpType"
        >
          <template slot-scope="scope">{{scope.row.neIpType ? scope.row.neIpType :'IPv4'}}</template>
        </el-table-column>
        <!-- 类型 -->
        <el-table-column
          v-if="columns[3].show"
          align="center"
          width="100"
          label="类型"
          sortable
          prop="siteType"
        >
          <template
            slot-scope="scope"
          >{{scope.row.subSiteType === 'HUB' ? 'HUB CPE' : scope.row.siteType}}</template>
        </el-table-column>
        <!-- POP属性 -->
        <el-table-column
          v-if="columns[4].show"
          align="center"
          width="120"
          label="POP属性"
          sortable
          prop="siteType"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.siteType === 'POP' && scope.row.siteRole === 'CROSS'">跨境</span>
            <span v-if="scope.row.siteType === 'POP' && scope.row.siteRole === 'PROVINCE'">省级</span>
            <span v-if="scope.row.siteType === 'POP' && scope.row.siteRole === 'CITY'">地市级</span>
            <span v-if="scope.row.siteType !== 'POP'">-</span>
          </template>
        </el-table-column>
        <!-- 型号 -->
        <el-table-column
          v-if="columns[5].show"
          align="center"
          width="150"
          label="型号"
          sortable
          show-overflow-tooltip
          prop="neType"
        >
          <template slot-scope="scope">{{scope.row.neType.replace('_', ' ')}}</template>
        </el-table-column>
        <!-- 关联设备 -->
        <el-table-column align="center" width="350" label="关联设备" prop="nes">
          <template slot-scope="scope">
            <relevance :row="scope.row" @refresh="refresh" />
          </template>
        </el-table-column>
        <!-- 租户 -->
        <el-table-column
          v-if="columns[6].show"
          align="center"
          width="150"
          label="租户"
          show-overflow-tooltip
          prop="extAttrs.orgName"
        />
        <!-- 开启DNS Proxy -->
        <el-table-column
          v-if="columns[7].show"
          align="center"
          width="130"
          label="DNS Proxy"
          sortable
          prop="dnsProxy"
        >
          <template slot-scope="scope">{{scope.row.dnsProxy ? '开启' : '关闭' }}</template>
        </el-table-column>
        <!-- 开启4G -->
        <el-table-column
          v-if="columns[8].show"
          align="center"
          width="100"
          label="4G"
          sortable
          prop="lte"
        >
          <template slot-scope="scope">{{scope.row.lte ? '开启' : '关闭' }}</template>
        </el-table-column>
        <!-- 开启WiFi -->
        <el-table-column
          v-if="columns[9].show"
          align="center"
          width="100"
          label="WiFi"
          sortable
          prop="wifi"
        >
          <template slot-scope="scope">{{scope.row.wifi ? '开启' : '关闭' }}</template>
        </el-table-column>
        <!-- 开启高可用 -->
        <el-table-column
          v-if="columns[10].show"
          align="center"
          width="100"
          label="高可用"
          sortable
          prop="ha"
        >
          <template slot-scope="scope">{{scope.row.ha ? '开启' : '关闭' }}</template>
        </el-table-column>
        <!-- 时钟同步 -->
        <el-table-column
          v-if="columns[11].show"
          align="center"
          width="110"
          label="时钟同步"
          sortable
          prop="ntp"
        >
          <template slot-scope="scope">
            <el-switch
              v-power="scope.row.dgId === 100000 ? 0 : 2"
              v-model="scope.row.ntp"
              @change="ntpSwitch(scope.row)"
            ></el-switch>
            {{scope.row.ntp ? '开启' : '关闭'}}
          </template>
        </el-table-column>
        <!-- LAN模式 -->
        <el-table-column
          v-if="columns[12].show"
          align="center"
          width="110"
          label="LAN模式"
          sortable
          prop="lanModel"
        >
          <template
            slot-scope="scope"
          >{{scope.row.lanModel === null ? '-' : scope.row.lanModel ? '自动' : '手动' }}</template>
        </el-table-column>
        <!-- 本地上网 -->
        <el-table-column
          v-if="columns[13].show"
          align="center"
          width="110"
          label="本地上网"
          sortable
          prop="localInternetAccess"
        >
          <template slot-scope="scope">{{scope.row.localInternetAccess ? '开启' : '关闭' }}</template>
        </el-table-column>
        <!-- 责任人 -->
        <el-table-column
          v-if="columns[14].show"
          align="center"
          width="100"
          label="责任人"
          show-overflow-tooltip
          prop="personLiable"
        />
        <!-- 联系方式 -->
        <el-table-column
          v-if="columns[15].show"
          align="center"
          width="150"
          label="联系方式"
          prop="telephone"
        />
        <!-- 具体地址 -->
        <el-table-column
          v-if="columns[16].show"
          min-width="300"
          label="具体地址"
          show-overflow-tooltip
          prop="extAttrs.specificAddress"
        />
        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" align="center" width="150px">
          <!-- 编辑  删除-->
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope)"
              v-power="scope.row.dgId === 100000 ? 0 : 2"
            >编辑</el-button>
            <el-button
              type="text"
              style="color: #FA6962"
              icon="el-icon-delete"
              @click="handleDelete(scope)"
              v-power="scope.row.dgId === 100000 ? 0 : 2"
            >删除</el-button>
          </template>
        </el-table-column>
      </tao-table>
    </template>
    <template v-if="show === 1">
      <create :product="product" @handleChange="handleChange($event)" />
    </template>
    <template v-if="show === 2">
      <update :product="product" :site="site" @handleChange="handleChange($event)" />
    </template>
  </div>
</template>

<script>
import info from './info';
import create from './create';
import update from './update';
import relevance from './relevance';
export default {
  components: {
    info,
    create,
    update,
    relevance
  },
  data () {
    return {
      show: 0,
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      dataList: [],
      filterSearch: {
        keyword: null,
        tenantName: null
      },
      columns: [
        { name: 'ID', show: true },
        { name: '名称', show: true },
        { name: 'IP类型', show: true },
        { name: '类型', show: true },
        { name: 'POP属性', show: true },
        { name: '型号', show: true },
        { name: '租户', show: true },
        { name: 'DNS Proxy', show: true },
        { name: '4G', show: true },
        { name: 'WiFi', show: true },
        { name: '高可用', show: true },
        { name: '时钟同步', show: true },
        { name: 'LAN模式', show: true },
        { name: '本地上网', show: true },
        { name: '责任人', show: true },
        { name: '联系方式', show: true },
        { name: '具体地址', show: true }
      ],
      product: [],
      site: {}
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  methods: {
    // 监控开关
    ntpSwitch (val) {
      let _this = this;
      let title = val.ntp ? '开启' : '关闭';
      _this.$http.post({
        url: '/api/sdwan/ntp/control/ntp',
        data: {
          siteId: val.id,
          enableNtp: title === '开启' ? true : false
        }
      }).then(res => {
        let { status } = res;
        if (status === '0') {
          _this.$message.success(title + '成功！');
          _this.refresh();
        } else {
          _this.refresh();
        }
      }).catch(err => {
        _this.refresh();
      });
    },
    // 回调
    handleChange (val) {
      let _this = this;
      _this.show = val;
    },
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        keyword: null,
        tenantName: null
      };
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      _this.dataList = [];
      let params = {
        keyword: _this.filterSearch.keyword,
        tenantName: _this.filterSearch.tenantName,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.post({
        url: '/api/sdwan/site/query',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.page.total = resultBody.count;
          _this.dataList = resultBody.objects;
        }
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    // 新增
    handleCreate () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/resource/model/product'
      }).then(result => {
        let { status, resultBody } = result;
        if (status === '0') {
          _this.product = resultBody.neTypes;
          _this.show = 1;
        }
      });
    },
    // 编辑
    handleUpdate (scope) {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/resource/model/product'
      }).then(result => {
        let { status, resultBody } = result;
        if (status === '0') {
          _this.product = resultBody.neTypes;
          _this.site = scope.row;
          _this.show = 2;
        }
      });
    },
    // 删除
    handleDelete (scope) {
      let _this = this;
      if (scope.row.nes.length === 0) {
        this.$confirm('您确定要删除当前数据吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          _this.$http.deleted({
            url: '/api/sdwan/site',
            data: [scope.row.id]
          }).then(res => {
            let { status } = res;
            if (status === '0') {
              _this.$message.success('删除成功！');
              _this.refresh();
            }
          });
        }).catch(() => {
          _this.$message.info('取消删除');
        });
      } else {
        _this.$message.warning('请先解除设备关联！');
      }

    }
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
  }

  ::v-deep .el-dialog__body {
    padding-bottom: 0;
  }
}
</style>